<template>
  <div class="container">
      <swiper :options="swiperOption" class="swiper" v-if="bannerLength">
        <swiper-slide v-for="(item,index) of info.banner" :key="item.id">
          <img class="swiper-img" :src="item" alt="">
          <div class="pagination">{{index+1}}/{{info.banner.length}}</div>
        </swiper-slide>
      </swiper>
      <div class="detail">
        <div class="name">{{info.name}}</div>
        <!-- <div class="price">
          <div>{{info.sales_no}}已售</div>
          <div>{{info.price}}元/小时</div>
        </div> -->
        <div class="address">
          <div class="addr">
            <img src="../assets/location.png" class="location">
            <div class="text">
              <div>{{info.address}}</div>
              <!-- <div>距离您3434千米，驾车120分钟</div> -->
            </div>
          </div>
          <div class="cellphone">
              <img src="../assets/phone.png" class="phone" @click="phoneCall(info.phone)">
          </div>
        </div>
      </div>
      <div class="time">
        <div class="choosetime">
          <div class="itemCenter">
            <img src="../assets/clock.png" class="clock">
            选择预定时间
          </div>
        </div>
        <div class="rightNow" @click="chooseTime">{{leftTime}}- {{rightTime}}</div>
      </div>
      <div class="explain">
        <div class="itemCenter">
          <img src="../assets/Explain_4px.png" class="explain4">
          使用说明
        </div>
        <ul class="list">
          <li>1、本茶舍2小时起订，后面每半个小时加50元</li>
          <li>2、禁止黄赌毒</li>
          <li>3、禁止外带</li>
          <li>4、全部消毒</li>
          <li>5、损坏按价赔偿</li>
        </ul>
      </div>
      <div class="settlement">
        <div class="left">
          <div>￥{{price}}</div>
          <div>共{{duration}}小时</div>
        </div>
        <div class="right" @click="goSettlement">去结算</div>
      </div>
      <div class="times" v-bind:style="{bottom:showSheet}">
        <div class="tip">{{tips}}</div>
        <div class="timeslot">
          <span @click="reserveM()">上午</span>
          <span @click="reserveA()">下午</span>
          <span @click="reserveN()">晚上</span>
        </div>
        <div class="clocks">
          <div class="timeStamp" v-for="(item,index) in timeList" :id="index" :name="item.reserve" :class="item.reserve == 1?'alreadyBG':''" @click="reserve(item,$event,index)">{{item.time}}</div>
        </div>
        <div class="operation">
          <div class="cancel" @click="switchMask(2)">取消</div>
          <div class="confirm" @click="confirm">确定</div>
        </div>
      </div>
      <div class="mask" v-if="showMask" @click="switchMask(1)"></div>
  </div>
</template>
<script>
import API from '../api/api';
export default {
  data(){
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        autoplay: true,
        loop: true,
      },
      leftTime:'',
      rightTime:'',
      timeList:'',
      roomId:'',
      actionSheetBottom:-539,
      info:'',
      showSheet:'-100%',
      showMask:false,
      tips:'灰色为已预定，另外时间必须是连续的',
      active:false,
      duration:0,
      startIndex:'',
      endIndex:'',
      contain:false,
      bannerLength:'',
      packetTime:0,
    }
  },
  computed:{
    price(){
      if(this.duration == 2){
        return 288
      }else if(this.packetTime == 1){
        return 488
      }else if(this.duration > 2){
        return 288 + (this.duration-2) * this.info.price
      }else{
        return 0
      }
    }
  },
  mounted(){
    var that = this;
    var id = that.$route.query.id;
    that.roomId = id;
    var url = that.HOST + API.allTimeUrl;
    var url2 = that.HOST + API.teaInfoUrl;
    //获取所有时间点
    that.$http.post(url+'?roomId='+id).then(res=>{
      console.log('times',res)
      that.timeList = res.data;
    })
    //获取茶室信息
    that.$http.post(url2+"?roomId="+id+'&openid='+sessionStorage.getItem('openid')).then(res=>{
      console.log('info',res)
      that.info = res.data;
      that.bannerLength = this.info.banner.length;
      sessionStorage.setItem('flags',this.info.old_customers);
    })
    //获取当前时间   凌晨时刻待完善
    var hour = new Date().getHours();
    var minute = new Date().getMinutes();
    if(minute < 30 && hour < 22){
      that.leftTime = hour + ':30';
      that.rightTime = (hour+2)+':30';
    }else if(minute > 30 && hour < 22){
      that.leftTime = (hour+1)+':00';
      that.rightTime = (hour+3)+':00';
    }else if(minute < 30 && hour == 22){
      that.leftTime = '22:00';
      that.rightTime = '24:00';
    }else if(minute > 30 && hour == 22){
      that.leftTime = '22:30';
      that.rightTime = '0:30';
    }else if(minute < 30 && hour == 23){
      that.leftTime = '23:00';
      that.rightTime = '1:00';
    }else if(minute > 30 && hour == 23){
      that.leftTime = '23:30';
      that.rightTime = '1:30';
    }else if(hour == 24){
      hour = 0;
    }
  },
  methods:{
    goSettlement(){
      if(this.duration == 0){
        this.$message({
          message: '请先选择时间哦',
          type: 'warning'
        });
        return
      }
      this.$router.push({path:'/order',query:{roomId:this.roomId,name:this.info.name,leftTime:this.leftTime,rightTime:this.rightTime,total:this.duration,price:this.price}})
    },
    phoneCall(e){
      window.location.href="tel://"+e;
    },
    chooseTime(){
      this.showSheet = 0;
      this.showMask = true;
    },
    switchMask(e){
      this.showMask = false;
      this.showSheet = '-100%';
      if(this.startIndex != '' && this.endIndex != ''){
        for(var i=this.startIndex;i<=this.endIndex;i++){
          document.getElementById(i).style.background='#F4FCFE';
          document.getElementById(i).style.color='#000';
        }
      }else if(this.startIndex != '' && this.endIndex == ''){
        document.getElementById(this.startIndex).style.background='#F4FCFE';
        document.getElementById(this.startIndex).style.color='#000';
      }
      this.startIndex = '';
      this.endIndex = '';
      //获取当前时间   凌晨时刻待完善
      var hour = new Date().getHours();
      var minute = new Date().getMinutes();
      if(minute < 30 && hour < 23){
        this.leftTime = hour + ':30';
        this.rightTime = (hour+2)+':30';
      }else{
        this.leftTime = (hour+1)+':00';
        this.rightTime = (hour+3)+':00';
      }
    },
    reserveM(){
      //9-13.30
      var item = this.timeList;
      for(var i=0,startIndex=0;i<item.length;i++){
        if(item[i].reserve == 0){
          document.getElementById(i).style.background='#F4FCFE';
          document.getElementById(i).style.color='#000';
        }
        if(item[i].time == '9:00'){
            startIndex = i;
            console.log('startindex',i)
        }
      }
      for(var j=startIndex;j<=(startIndex+9);j++){
        if(item[j]){
          if(item[j].reserve == 1){
            this.$message({
              message: '当前时间段无法连续哦',
              type: 'warning'
            });
            return
          }
        }else{
          this.$message({
              message: '当前时间段无法连续哦',
              type: 'warning'
            });
          return
        }
      }
      for(var i=startIndex;i<=(startIndex+9);i++){
        document.getElementById(i).style.background='#4AB0B5';
        document.getElementById(i).style.color='#fff';
        this.leftTime = '9:00';
        this.rightTime = '13:30';
        this.duration = '4.5';
        this.packetTime = 1;
      }
    },
    reserveA(){
      //14-18.30
      var item = this.timeList;
      for(var i=0,startIndex=0;i<item.length;i++){
        if(item[i].reserve == 0){
          document.getElementById(i).style.background='#F4FCFE';
          document.getElementById(i).style.color='#000';
        }
        if(item[i].time == '14:00'){
            startIndex = i;
        }
      }
      for(var j=startIndex;j<=(startIndex+9);j++){
        if(item[j]){
          if(item[j].reserve == 1){
            this.$message({
              message: '当前时间段无法连续哦',
              type: 'warning'
            });
            console.log('111')
            return
          }
        }else{
            this.$message({
                message: '当前时间段无法连续哦',
                type: 'warning'
              });
              console.log('222')
            return
        }
      }
      for(var i=startIndex;i<=(startIndex+9);i++){
        document.getElementById(i).style.background='#4AB0B5';
        document.getElementById(i).style.color='#fff';
        this.leftTime = '14:00';
        this.rightTime = '18:30';
        this.duration = '4.5';
        this.packetTime = 1;
      }
    },
    reserveN(){
      //19-23.30
      var item = this.timeList;
      for(var i=0,startIndex=0;i<item.length;i++){
        if(item[i].reserve == 0){
          document.getElementById(i).style.background='#F4FCFE';
          document.getElementById(i).style.color='#000';
        }
        if(item[i].time == '19:00'){
            startIndex = i;
        }
      }
      for(var j=startIndex;j<=(startIndex+9);j++){
        if(item[j]){
          if(item[j].reserve == 1){
            this.$message({
              message: '当前时间段无法连续哦',
              type: 'warning'
            });
            return
          }
        }else{
          this.$message({
              message: '当前时间段无法连续哦',
              type: 'warning'
            });
          return
        }
      }
      for(var i=startIndex;i<=(startIndex+9);i++){
        document.getElementById(i).style.background='#4AB0B5';
        document.getElementById(i).style.color='#fff';
        this.leftTime = '19:00';
        this.rightTime = '23:30';
        this.duration = '4.5';
        this.packetTime = 1;
      }
    },
    reserve(e,$event,index){
      this.packetTime = 0;
      var item = this.timeList;
      for(var i=0;i<item.length;i++){
        if(item[i].reserve == 0){
          document.getElementById(i).style.background='#F4FCFE';
          document.getElementById(i).style.color='#000';
        }
      }
      if(e.reserve == 1){
        this.$message('此时段已被预定！');
      }else{
        //第一次点击开始的时间点
        if(this.startIndex == ''){
          console.log('first',$event)
          $event.target.style.background='#4AB0B5';
          $event.target.style.color='#fff';
          this.startIndex = index;
          this.leftTime = e.time;
        }else if(this.startIndex == index || this.endIndex == index){
        //第二次点击开始的时间点
          console.log('cancel first')
          console.log(this.startIndex,this.endIndex)
          //如果还没开始点击结束就取消
          if(this.endIndex == ''){
            $event.target.style.background='#F4FCFE';
            $event.target.style.color='#000';
            this.startIndex = ''
          }else{
            if(this.startIndex > this.endIndex){
              for(var i=this.endIndex;i<=this.startIndex;i++){
                document.getElementById(i).style.background='#F4FCFE';
                document.getElementById(i).style.color='#000';
              }
            }else{
              for(var i=this.startIndex;i<=this.endIndex;i++){
                document.getElementById(i).style.background='#F4FCFE';
                document.getElementById(i).style.color='#000';
              }
            }
            this.startIndex = '';
            this.endIndex = '';
          }

        }else if(this.startIndex != '' && this.endIndex == ''){
        //第一次点击结束的时间点
          console.log('second',this.startIndex,this.endIndex)
          //如果中间包含预定的
          if(index < this.startIndex){
            for(var i=index;i<this.startIndex;i++){
              if(document.getElementById(i).getAttribute('name') == 1){
                this.$message({
                  message: '时间必须是连续的哦',
                  type: 'warning'
                });
              console.log('stop')
              return
              }
            }
          }else{
            for(var i=this.startIndex;i<index;i++){
              if(document.getElementById(i).getAttribute('name') == 1){
                this.$message({
                  message: '时间必须是连续的哦',
                  type: 'warning'
                });
              console.log('stop')
              return
              }
            }
          }
          // 如果结束的时间比开始的时间晚
          if(this.startIndex > index){
            this.endIndex = this.startIndex;
            this.startIndex = index;
            this.rightTime = this.leftTime;
            this.leftTime = e.time;
          }else{
            this.endIndex = index;
            this.rightTime = e.time;
          }
          this.duration = (this.endIndex - this.startIndex)/2;
          for(var i=this.startIndex;i<=this.endIndex;i++){
            document.getElementById(i).style.background='#4AB0B5';
            document.getElementById(i).style.color='#fff';
          }
        }else if(this.startIndex != '' && this.endIndex != ''){
        //第二次点击结束的时间点
          console.log('second add or reduce',index,this.startIndex,this.endIndex)
          //如果中间包含预定的
          if(index < this.startIndex){
            for(var i=index;i<this.endIndex;i++){
              if(document.getElementById(i).getAttribute('name') == 1){
                this.$message({
                  message: '时间必须是连续的哦',
                  type: 'warning'
                });
              console.log('stop')
              return
              }
            }
          }else{
            for(var i=this.startIndex;i<index;i++){
              if(document.getElementById(i).getAttribute('name') == 1){
                this.$message({
                  message: '时间必须是连续的哦',
                  type: 'warning'
                });
              console.log('stop')
              return
              }
            }
          }
          //点击的时间比早的更早
          if(index < this.startIndex){
            for(var i=index;i<=this.endIndex;i++){
              document.getElementById(i).style.background='#4AB0B5';
              document.getElementById(i).style.color='#fff';
            }
            this.startIndex = index;
            this.leftTime = e.time;
          }else if(index > this.startIndex && index < this.endIndex){
          //点击的时间在早晚之间
            console.log('center')
            for(var i=index+1;i<=this.endIndex;i++){
              document.getElementById(i).style.background='#F4FCFE';
                document.getElementById(i).style.color='#000';
            }
            this.endIndex = index;
            this.rightTime = e.time;
          }else if(index > this.endIndex){
          //点击的时间比晚的更晚
            for(var i=this.startIndex;i<=index;i++){
              document.getElementById(i).style.background='#4AB0B5';
              document.getElementById(i).style.color='#fff';
            }
            this.endIndex = index;
            this.rightTime = e.time;
          }
          this.duration = (this.endIndex - this.startIndex)/2;
        }
      }
    },
    confirm(){
      if(this.duration < 2){
        this.$message({
          message: '时间最短为2小时哦',
          type: 'warning'
        });
      }else{
       this.showMask = false;
       this.showSheet = '-100%';
      }
    },
  }
}
</script>
<style scoped>
  .itemCenter{
    display: inline-flex;
    align-items: center;
    margin: 0 auto;
  }
  .itemCenter img{
    margin-right: 5px;
  }
  .container{
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgb(243, 244, 246);
    font-size: 13px;
  }
  .swiper{
    margin: 5px 10px;
    width: 96%;
    box-sizing: border-box;
    border-radius: 10px;
  }
  .swiper-img{
    border-radius: 10px;
    width: 100%;
    position: relative;
    vertical-align: top;
  }
  .pagination{
    position: absolute;
    z-index: 999999;
    right: 15px;
    bottom: 20px;
    display: inline-block;
    background: rgba(0,0,0,.4);
    padding:2px 8px;
    border-radius: 15px;
    font-size: 12px;
    color:#fff;
  }
  .detail,.time,.explain{
    margin: 10px;
    padding: 15px;
    border-radius: 10px;
    background: #fff;
  }
  .detail{
    margin: 0 10px;
  }
  .name{
    text-align: center;
    font-weight: 900;
    font-size: 17px;;
    padding-bottom: 8px;
  }
  .price{
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
  }
  .choosetime,.explain{
    text-align: center;
    font-size: 17px;
    padding-bottom: 10px ;
  }
  .location,.clock,.explain4{
    width: 20px;
    height: 20px;
  }
  .phone{
    width: 17px;
    height: 17px;
  }
  .location{
    margin-right: 5px;
  }
  .address,.addr{
    display: flex;
    align-items: center;
  }
  .address{
    justify-content: space-between;
    padding-top: 10px ;
    border-top: 1px solid #e3e3e3;
  }
  .cellphone{
    display: flex;
    align-items: center;
    padding: 7px 20px;
    border-left: 1px solid #e3e3e3;
  }
  .rightNow{
    text-align: center;
    color: #3D9CA1;
  }
  .list{
    list-style: none;
    text-align: left;
    font-size: 14px;
  }
  .settlement{
    position: fixed;
    bottom: 30px;
    left: 10%;
    width: 80%;
    display: flex;
    align-items: center;
    height: 50px;

  }
  .left{
    background: #4A4860;
    color:#fff;
    height: 50px;
    line-height: 50px;
    width: 70%;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    padding-left: 20px;
    display: flex;
  }
  .left div{
    margin-right: 10px;
  }
  .right{
    color: #fff;
    background: #3D9CA1;
    height: 50px;
    line-height: 50px;
    width: 30%;
    text-align: center;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
  }
  .times{
    height: 90%;
    position: fixed;
    background: #FFF;
    z-index: 999999999;
    width: 100%;
    transition: all .5s;
  }
  .times :nth-child(5),.times :nth-child(10),.times :nth-child(15),.times :nth-child(20),.times :nth-child(25),.times :nth-child(30),.times :nth-child(35),.times :nth-child(40),.times :nth-child(45),.times :nth-child(50),.times :nth-child(55){
    margin-right:0;
  }
  .clocks{
    /* padding-left: 10px; */
    text-align: center;
  }
  .timeStamp{
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    padding: 3px 0;
    margin-bottom:3%;
    margin-right: 3%;
    width: 16%;
    /* border: 1px solid #000; */
    background: #F4FCFE;
    border-radius: 8px;
  }
  .operation{
    display: flex;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .cancel,.confirm{
    width: 50%;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;
  }
  .cancel{
    color:#4AB0B5;
    background: #ECF8F8;
  }
  .confirm{
    background: #4AB0B5;
  }
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    z-index: 99999;
    background: rgba(0,0,0,.1);
  }
  .tip{
    padding: 8px 18px;
    border-bottom: 1px solid #F4FCFE;
    color:#aaa;
  }
  .alreadyBG{
    background:#A1A9AC;
    color:#fff;
  }
  .timeslot{
    padding:0 0 10px 18px;
  }
  .timeslot span{
    margin-right: 30px;
    width: 10%;
    padding: 3px 8px;
    background: #4AB0B5;
    display: inline-flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 3px;
    color:#fff;
  }
</style>
